<template>
  <div class="box_audit">
    <div v-for="(item,index) in auditList.nodes" v-if="auditList.nodes" :key="item.id" class="max_flex">
      <div class="max_tent">
        <div v-if="item.status !== 0" :style="getCurrent(item.status).bgc" class="tent_one">
          <i :class="getCurrent(item.status).icon" style="font-size: 15px; color: #fff;"></i>
        </div>
        <img :style="{filter: item.status == 0 ? 'grayscale(90%)' : 'grayscale(0%)'}" style="width: 42px; height: 42px;" :src="require(`@/assets/images/carbon${item.type}.png`)" alt="">
        <div v-show="index !== auditList.nodes.length-1" class="xian">
          <div class="xian_icon"></div>
        </div>
      </div>
      <div class="foot_one">
        <div class="one">
          <span>{{ item.name }}</span>
          <span style="color: #ccc" v-if="item.type == 0">
            ({{ item.approveRule == 0 ? '一人通过即可' : '需所有审批同意' }})
          </span>
        </div>
        <div class="two" :style="getCurrent(item.status).color"><span>{{ getTitle(item.status) }}</span><span style="color: #aaa; padding-left: 10px;">{{item.handlingTime}}</span></div>
        <div style="display: flex; flex-wrap: wrap;">
          <div v-for="i in item.users" :key="i.id" class="text1 max_tent">
            <el-image v-if="i.headPortraitPath" class="tent_image" fit="cover" :src="$config.imgUrl+i.headPortraitPath" :preview-src-list="[$config.imgUrl+i.headPortraitPath]">
            </el-image>
            <img v-else class="tent_image" src="@/assets/images/morenImg.png">
            <span style="padding-left: 5px; white-space: nowrap;">{{ i.userName }}</span>

            <template v-if="item.status !== 0 && item.type == 0">
              <template v-if="item.status === 3 || item.status === 6">
                <div v-if="i.status === 3 || i.status === 6" :style="getCurrent(i.status).bgc" class="tent_one1">
                  <i style="font-size: 15px; color: #fff;" :class="getCurrent(i.status).icon"></i>
                </div>
              </template>
              <div v-else :style="getCurrent(i.status).bgc" class="tent_one1">
                <i style="font-size: 15px; color: #fff;" :class="getCurrent(i.status).icon"></i>
              </div>
            </template>
          </div>
        </div>
        <div v-for="(e, i) in userComment(item.users)" :key="i" class="foot">
          <span class="text">
            {{e.userName}}：{{ e.tent }}
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "GatherDataComponentsAudit",
  props: ["rowTaskId"],
  data() {
    return {
      auditList: {},
    };
  },
  watch: {
    rowTaskId: {
      handler(id) {
        if (id) {
          this.addAudit(id);
        }
      },
      immediate: true,
    },
  },
  computed: {
    // 人员评论
    userComment() {
      return (data) => {
        let arr = [];
        data.forEach((item) => {
          if (item.approvalOpinion) {
            arr.push({
              userName: item.userName,
              status: 2,
              tent: item.approvalOpinion,
            });
          }
          if (item.rejectOpinion) {
            arr.push({
              userName: item.userName,
              status: 6,
              tent: item.rejectOpinion,
            });
          }
          if (item.rebutOpinion) {
            arr.push({
              userName: item.userName,
              status: 5,
              tent: item.rebutOpinion,
            });
          }
        });
        return arr;
      };
    },
    getCurrent() {
      return (type) => {
        if (type == 1 || type == 2 || type == 4) {
          return {
            typeBut: "typeBut1",
            icon: "el-icon-more",
            color: { color: " #496dff" },
            bgc: { "background-color": "#5a8bff" },
          };
        } else if (type == 3) {
          return {
            typeBut: "typeBut2",
            icon: "el-icon-check",
            color: { color: " #39ce78" },
            bgc: { "background-color": "#39ce78" },
          };
        } else if (type == 5 || type == 6 || type == 7 || type == 8) {
          return {
            typeBut: "typeBut3",
            icon: "el-icon-close",
            color: { color: " #fe5a57" },
            bgc: { "background-color": "#fe5a57" },
          };
        } else {
          return {};
        }
      };
    },
    // 审批状态文字
    getTitle() {
      return (type) => {
        if (type == 0) {
          return "";
        } else if (type == 2) {
          return "待审批";
        } else if (type == 3) {
          return "已完成";
        } else if (type == 6) {
          return "已驳回";
        } else if (type == 7) {
          return "已撤销";
        }
      };
    },
    // 图表类型
    getStore() {
      return (type) => {
        if (type == 1 || type == 2 || type == 4) {
          return "typeBut1";
        } else if (type == 3) {
          return "typeBut2";
        } else if (type == 5 || type == 6 || type == 7 || type == 8) {
          return "typeBut3";
        }
      };
    },
    // 展示图标
    getClass() {
      return (type) => {
        if (type == 2 || type == 4) {
          return "el-icon-more";
        } else if (type == 3) {
          return "el-icon-check";
        } else if (type == 5 || type == 6 || type == 7 || type == 8) {
          return "el-icon-close";
        }
      };
    },
    // 字体颜色
    getColor() {
      return (type) => {
        if (type == 2 || type == 4) {
          return { color: " #496dff" };
        } else if (type == 3) {
          return { color: " #39ce78" };
        } else if (type == 5 || type == 6 || type == 7 || type == 8) {
          return { color: " #fe5a57" };
        }
      };
    },
    // 背景颜色
    getBgc() {
      return (type) => {
        if (type == 2 || type == 4) {
          return {
            "background-color": "#5a8bff",
          };
        } else if (type == 3) {
          return {
            "background-color": "#39ce78",
          };
        } else if (type == 5 || type == 6 || type == 7 || type == 8) {
          return {
            "background-color": "#fe5a57",
          };
        }
      };
    },
  },
  methods: {
    // 点击审核
    addAudit(id) {
      let params = {
        id: id,
        userId: this.$store.getters.userInfo.id,
      };
      this.$http.taskDetail(params).then(({ result }) => {
        this.auditList = result;
        this.$emit("change", result);
      });
    },
  },
};
</script>

<style lang='scss' scoped>
.box_audit {
  padding-top: 10px;
  .max_flex {
    display: flex;
  }
  .tent_image {
    width: 30px;
    height: 30px;
    border-radius: 50%;
  }
  .max_tent {
    position: relative;
    top: 0;
    .tent_one {
      z-index: 1;
      position: absolute;
      top: 28px;
      left: 28px;
      border-radius: 50%;
      width: 17px;
      height: 17px;
      border: 1px solid #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: 0.3s;
      &:hover {
        transform: scale(1.5);
      }
    }
    .state_two {
      position: absolute;
      top: 28px;
      left: 28px;
      border-radius: 50%;
      width: 17px;
      height: 17px;
      border: 1px solid #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: 0.3s;
      &:hover {
        transform: scale(1.5);
      }
    }
  }

  .xian {
    margin-left: 20px;
    height: 100%;
    .xian_icon {
      width: 2px;
      border: 1px solid #eaeaea;
      height: calc(100% - 42px);
      min-height: 30px;
    }
  }
  .foot_one {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-left: 10px;
    padding-bottom: 20px;
    .two {
      margin-top: 10px;
      margin-bottom: 10px;
    }
    .foot {
      margin-top: 15px;
      .text {
        background: #f5f7fc;
        // border: 1px solid #edf4ff;
        border-radius: 2px 2px 2px 15px;
        padding: 5px 10px;
      }
    }
    .text1 {
      margin-right: 10px;
      margin-bottom: 5px;
      padding: 3px 6px;
      background: #f5f7fc;
      border: 1px solid #edf4ff;
      border-radius: 18px;
      display: flex;
      align-items: center;
      .tent_one1 {
        position: absolute;
        right: 0px;
        top: -5px;
        border-radius: 50%;
        width: 17px;
        height: 17px;
        border: 1px solid #edf4ff;
        background-color: #39ce78;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: 0.3s;
        &:hover {
          transform: scale(1.5);
        }
      }
    }
  }
  .typeBut1 {
    color: #496dff;
    background: #f5f7fc;
    border: 1px solid #5a8bff;
    &:hover {
      background: #edf1fb;
    }
  }
  .typeBut2 {
    color: #39ce78;
    background: #f5fff9;
    border: 1px solid #39ce78;
    &:hover {
      background: #e7fbee;
    }
  }
  .typeBut3 {
    color: #fe5a57;
    background: #fff3f3;
    border: 1px solid #fe5a57;
    &:hover {
      background: #fbe6e6;
    }
  }
}
</style>
